<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="实名认证"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="flx-row-s-c item-line">
        <div class="title-name">认证类型</div>
        <Select v-model="authType" style="width: 200px">
          <Option
              v-for="item in authTypeList"
              :value="item.value"
              :key="item.value"
          >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div v-if="authType === 0">
        <div class="flx-row-s-c item-line">
          <div class="title-name">姓名</div>
          <Input
              v-model.trim="name"
              placeholder="请输入"
              maxlength="10"
              style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">证件类型</div>
          <Select v-model="type" style="width: 200px">
            <Option
                v-for="item in typeList"
                :value="item.value"
                :key="item.value"
            >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">证件号码</div>
          <Input
              v-model.trim="number"
              placeholder="请输入"
              maxlength="18"
              style="width: 200px"
          />
        </div>
        <div class="flx-row-s-s item-line">
          <div class="title-name">证件照片</div>
          <div class="flx-col-c-c">
            <Upload
                v-if="!file"
                type="drag"
                :before-upload="handleBeforeUpload"
                :show-upload-list="false"
                action="/"
            >
              <div
                  class="add-photo"
                  :style="{
                backgroundImage: `url(${require('_a/userImages/' +
                  (colorType == 0
                    ? 'add-photo'
                    : colorType == 1
                    ? 'add-photo-g'
                    : colorType == 2
                    ? 'add-photo-b'
                    : 'add-photo-p') +
                  '@2x.png')})`,
              }"
              ></div>
            </Upload>
            <div
                v-else
                class="img-display"
                :style="{ backgroundImage: 'url(' + fileImg + ')' }"
            >
              <div class="delect-area" @click="deletePic"></div>
            </div>
            <span class="c-r" style="margin-top: 5px">点击上传证件正面</span>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="flx-row-s-c item-line">
          <div class="title-name">企业名称</div>
          <Input
              v-model.trim="name"
              placeholder="请输入"
              maxlength="25"
              style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">证件类型</div>
          <Select v-model="type" filterable style="width: 200px">
            <Option
                v-for="item in companyTypeList"
                :value="item.value"
                :key="item.value"
            >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">法定代表人</div>
          <Input
              v-model.trim="person"
              placeholder="请输入"
              maxlength="25"
              style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">证件号码</div>
          <Input
              v-model.trim="number"
              placeholder="请输入"
              maxlength="25"
              style="width: 200px"
          />
        </div>
        <div class="flx-row-s-s item-line">
          <div class="title-name">证件照片</div>
          <div class="flx-col-c-c">
            <Upload
                v-if="!file"
                type="drag"
                :before-upload="handleBeforeUpload"
                :show-upload-list="false"
                action="/"
            >
              <div
                  class="add-photo"
                  :style="{
                backgroundImage: `url(${require('_a/userImages/' +
                  (colorType == 0
                    ? 'add-photo'
                    : colorType == 1
                    ? 'add-photo-g'
                    : colorType == 2
                    ? 'add-photo-b'
                    : 'add-photo-p') +
                  '@2x.png')})`,
              }"
              ></div>
            </Upload>
            <div
                v-else
                class="img-display"
                style="position: relative"
                :style="{ backgroundImage: 'url(' + fileImg + ')' }"
            >
              <Spin :withIcon="true" v-if="uploading"></Spin>
              <div class="delect-area" v-if="!uploading" @click="deletePic"></div>
            </div>
            <span class="c-r" style="margin-top: 5px">点击上传证件正面</span>
          </div>
        </div>
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="handleSubmit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { submitIdentify, addEnterpriseCertificates, uploadCompanyPhoto } from "@/api/user";
import { comCertList } from "@/utils/publicData";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    colorType: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      loading: false,
      authTypeList: [{
        value: 0,
        label: "个人认证",
      }, {
          value: 1,
          label: "企业认证"
      }],
      authType: 0,
      typeList: [
        {
          value: 0,
          label: "身份证",
        },
        {
          value: 1,
          label: "护照",
        },
        {
          value: 2,
          label: "军官证",
        },
        {
          value: 3,
          label: "港澳居民来往内地通行证",
        },
        {
          value: 4,
          label: "港澳居民居住证",
        },
        {
          value: 5,
          label: "台湾居民来往大陆通行证",
        },
        {
          value: 6,
          label: "台湾居民居住证",
        },
        {
          value: 7,
          label: "外国人永久居留身份证",
        },
      ],
      companyTypeList: comCertList(),
      // 表单数据
      file: null,
      fileImg: "",
      name: "",
      type: 0,
      number: "",
      person: '',
      path: '',
      uploading: true,
    };
  },
  methods: {
    // 选择图片后处理
    handleBeforeUpload: function (file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg"
      ) {
        this.$Message.warning("图片要求上传jpg或者png格式或者jpeg格式");
        return false;
      }
      if (file.size > 1048576) {
        this.$Message.warning("图片大小不能超过1M");
        return false;
      }
      this.file = file;
      this.fileImg = window.URL.createObjectURL(file);
      if (this.authType === 1) {
        this.uploadCompanyPhoto();
      }
      return false;
    },
    // 上传图片
    async uploadCompanyPhoto() {
      this.uploading = true;
      let data = new FormData();
      data.append("file", this.file);
      let res = await uploadCompanyPhoto(data);
      if (res.code == 200) {
        if (res.data.name != null && res.data.name != "")
          this.name = res.data.name;
        if (res.data.number != null && res.data.number != "")
          this.number = res.data.number;
        if (res.data.type != null && res.data.type != "")
          this.type = res.data.type;
        if (res.data.person != null && res.data.person != "")
          this.person = res.data.person;

        this.path = res.data.path;
        this.fileImg = res.data.url;
      } else {
        this.deletePic();
      }
      this.uploading = false;
    },
    // 删除图片
    deletePic() {
      this.file = null;
      this.fileImg = "";
      this.path = "";
    },
    handleSubmit() {
      if (this.authType === 1) {
        this.companySubmit()
      } else {
        this.submit()
      }
    },
    // 提交表单
    async submit() {
      if (!this.name) {
        this.$Message.warning("请输入真实姓名！");
        return;
      }
      if (!this.number) {
        this.$Message.warning("请输入正确的证件号码！");
        return;
      }
      if (!this.file) {
        this.$Message.warning("请上传证件正面图片！");
        return;
      }
      this.loading = true;
      let data = new FormData();
      data.append("file", this.file);
      data.append("number", this.number);
      data.append("confirmNumber", this.number);
      data.append("name", this.name);
      data.append("type", this.type);
      let res = await submitIdentify(data);
      if (res.code == 200) {
        this.$Message.success("认证成功！");
        if (!this.$store.state.user.username) {
          this.$store.commit("setUsername", this.name);
        }
        this.$emit("submit-success");
        this.cancel();
      }
      this.loading = false;
    },
    // 提交表单
    async companySubmit() {
      if (!this.name) {
        this.$Message.warning("请输入真实姓名！");
        return;
      }
      if (!this.number) {
        this.$Message.warning("请输入正确的证件号码！");
        return;
      }
      if (!this.person) {
        this.$Message.warning("请输入法定代表人！");
        return;
      }
      if (this.type == -1) {
        this.$Message.warning("请输入正确的证件号码！");
        return;
      }
      if (!this.path) {
        this.$Message.warning("请上传证件正面图片！");
        return;
      }
      this.loading = true;
      let data = {
        name: this.name,
        number: this.number,
        type: this.type,
        imgUrl: this.fileImg,
        imgName: this.path,
        person: this.person,
      };
      let res = await addEnterpriseCertificates(data);
      if (res.code == 200) {
        this.$Message.success("添加认证成功！");
        this.$emit("submit-success");
        this.cancel();
      }
      this.loading = false;
    },
    cancel() {
      this.config = false;
      this.name = "";
      this.type = 0;
      this.number = "";
      this.file = null;
      this.fileImg = "";
      this.person = ''
      this.path = ''
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }
}
.add-photo {
  @include size(200px, 121px);
  @include bg-setting("add-photo");
  cursor: pointer;
}
.img-display {
  @include size(200px, 121px);
  border: 1px dashed #dcdee2;
  @include bg-setting();
  position: relative;
  border-radius: 5px;
}
.img-display .delect-area {
  display: none;
}
.img-display:hover .delect-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fc461e;
  @include bg-setting("cuowu", 10px 10px, center);
  transition: background-color 0.2s;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
</style>
